<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		body{background-color:#ccc;}
		#sy{
			width: 400px;
			margin:20px auto;
			text-align:center;
			border:1px solid #ccc;
			margin:30px auto;
		}
	</style>
</head>
<body>
	<form action="" id="sy">
		<p>姓名：
			<input type="text" id="xm" onblur="Name()">
			<span id="sxm"></span>
		</p>
		<p>姓氏：
			<input type="text" id="xs" onblur="txxs()">
			<span id="sxs"></span>
		</p>
		<p>登录名：
			<input type="text" id="dlm" onblur="dlmc()">
			<span id="sdlm"></span>
		</p>
		<p>密码：
			<input type="password" id="mm" onblur="smm()">
			<span id="yzmm"></span>
		</p>
		<p>再次输入密码：
			<input type="password" id="mm2" onblur="smm2()">
			<span id="yzmm2"></span>
		</p>
		<p>电子邮箱：
			<input type="text" id="yx" onblur="email()">
			<span id="syx"></span>
		</p>
		<p>性别：
			<input type="radio" value="famale" name="gender" checked/>女
			<input type="radio" value="male" name="gender"/>男
		</p>
		<p>头像：
			<input type="file">
		</p>
		<p>爱好：
			<input type="checkbox" value="运动"/>运动
			<input type="checkbox" value="聊天"/>聊天
			<input type="checkbox" value="玩游戏"/>玩游戏
		</p>
		<p>出生日期：
			<input type="date" name="" id="csrq">
			<span id="scsrq"></span>
		</p>
		<p>
			<input type="submit" value="提交">
			<input type="reset" value="重填">
		</p>
	</form>
</body>
	<script>
		//姓名
		/*function Name(){			
			var name=document.getElementById('xm').value;//获取填写的信息
			var reg1=/^[^\b"]+$/i;
			if(!reg1.test(name)){
				sxm.innerHTML="不能为空且不能有数字".fontcolor('red');
			}else{
				sxm.innerHTML="正确".fontcolor('blue');
			}			
		}
		//姓氏
		function txxs(){			
			var xs=document.getElementById('xs').value;//获取填写的信息
			var reg2=/^[^\b"]+$/i;
			if(!reg2.test(xs)){
				sxm.innerHTML="不能为空且不能有数字".fontcolor('red');
			}else{
				sxm.innerHTML="正确".fontcolor('blue');
			}*/
		//登录名
		function dlmc(){
			var dlm=document.getElementById('dlm').value;
			var reg3=/^[a-z]+_[0-9]$/;
			if(!reg3.test(dlm)){
				sdlm.innerHTML='要包含a-z，0-9和下划线_'.fontcolor('red');
			}else{
				sdlm.innerHTML='正确'.fontcolor('blue');
			}
		}	
		//密码
		function smm(){
			var mm=document.getElementById('mm').value;
			if(mm.length>0){
				var reg=/^\w{6}$/;
				var s=document.getElementById('yzmm');
				if(reg.test(mm)){
					s.innerHTML='正确'.fontcolor('blue');
					return true
				}else{
					s.innerHTML='最少包含6个数字'.fontcolor('red');
					return false;
				}
			}
		}
		//再次输入密码
		function smm2(){
			var mm=document.getElementById('mm').value; 
			var mm2=document.getElementById('mm2').value;
			if(mm!=mm2){
				yzmm2.innerHTML='两次密码不一致'.fontcolor('red');
			}else{
				yzmm2.innerHTML='正确'.fontcolor('blue');
			}
		}
		//邮箱
		function email(){
			var email=document.getElementById('yx').value;
			var reg4=/^\w+@\w+\.$/;
			if(!reg4.test(email)){
				syx.innerHTML='必须包含字符，@和.'.fontcolor('red');
			}else{
				syx.innerHTML='正确'.fontcolor('blue');
			}
		}
		
	</script>
</html>
